<html lang="en" ng-app='mockups' >
<head>
  <!-- ====|| STYLESHEETS ||==== -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css" rel="stylesheet">
  <!-- ====|| CUSTOM STYLE ||==== -->
  <link rel="stylesheet" href="./index.css">
</head>
<body ng-controller='main' ng-cloak>
  <div ng-repeat="arrRow in arrRows" layout="row">
    <div ng-repeat="strColumn in arrRow" flex="20" class="md-padding">
      <div> {{strColumn}} </div>
      <pre ng-repeat="v in arrItems" pretty-json="v" class="{{objClasses[strColumn][$index]}}"></pre>
    </div>
  </div>
  <!-- ====|| LIBS ||==== -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
  <script type="text/javascript" src="./directives/ng-prettyjson.js"></script>
  <script src="https://use.fontawesome.com/f00c5e3729.js"></script>
  <!-- ====|| CUSTOM LOGIC ||==== -->
  <script src="./index.js"></script>
</body>
</html>